<header>
		<div class="row navbar-inverse">
			<div class="navbar-header">
				<a class="navbar-brand" href="http://www.insightplm.com"><img
					src="resources/app/images/logo_inv.png" height="40px" /></a>
			</div>
			<ul class="nav navbar-nav">
				<li>
					<h4 class="navbar-text">Site Execution Management</h4>
				</li>
			</ul>
			<div class="navbar-right">
				<ul class="nav navbar-nav navbar-left">
					<li class="cdrop active"><a href="home.htm"><i
							class="fa fa-home"></i> <span>Home</span></a></li>
					<li class="cdrop active"><a href="#"
						onclick='location.reload();'><i class="fa fa-refresh"></i> <span>Refresh</span></a></li>
				</ul>

				<form class="navbar-form navbar-left">
					<div class="form-group">
						<input type="text" placeholder="Search"
							class="search-query animated"> <i class="fa fa-search"></i>
					</div>
				</form>

				<ul class="nav navbar-nav navbar-left">
					<li class="dropdown"><a data-toggle="dropdown"
						class="dropdown-toggle dropdown-avatar" href="#"> <span> <img class="menu-avatar" src="loadUsrAvatar.htm">
							<span class="header-text">${username}<i
								class="fa fa-caret-down"></i>
						</span> ${messages-bdg}
					</span>
					</a>
						<ul class="dropdown-menu">

							<!-- the first element is the one with the big avatar, add a with-image class to it -->

							<li class="with-image">
								<div class="avatar">
									<img height="60px" src="loadUsrAvatar.htm">
								</div> <span>${username}</span>
							</li>

							<li class="divider"></li>

							<li><a href="#"><i class="fa fa-user"></i> <span>Profile</span></a></li>
							<li><a href="#"><i class="fa fa-cog"></i> <span>Settings</span></a></li>
							<li><a href="#"><i class="fa fa-envelope"></i> <span>Messages</span>${messages-lbl}</a></li>
							<li><a href="#"><i class="fa fa-power-off"></i> <span>Logout</span></a></li>
						</ul></li>
				</ul>
			</div>
		</div>
	</header>